<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      html,
      body,
      #app,
      #list,
      #login {
        height: 100%;
      }
      ul {
        list-style: none;
      }
      #login {
        background-image: url("https://www4.bing.com//th?id=OHR.SaltDesert_ZH-CN4728398785_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp");
        background-size: cover;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      #login fieldset {
        width: 300px;
        height: 200px;
        color: #fff;
        border-radius: 8px;
        border: 5px solid #fff;
        text-align: center;
      }
      #login fieldset legend {
        text-align: center;
        padding: 0 10px;
        font-size: 30px;
        font-weight: 600;
        color: #fff;
      }
      #login fieldset div {
        margin-top: 15px;
      }
      #login fieldset div span {
        font-size: 20px;
        display: inline-block;
      }
      #login fieldset div input {
        height: 30px;
        line-height: 30px;
        background-color: #0000;
        color: #fff;
        outline: none;
        border-radius: 6px;
        border: 2px solid #fff;
        padding-left: 10px;
      }
      #login fieldset div button {
        width: 210px;
        height: 35px;
        border-radius: 6px;
        cursor: pointer;
        font-weight: 600;
      }
      #list {
        background-image: url("https://www4.bing.com//th?id=OHR.SeaAngel_ZH-CN6176844066_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp");
        background-size: cover;
      }
      #list .header {
        height: 60px;
        line-height: 60px;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: space-around;
      }
      .header_text {
        color: #fff;
        font-size: 30px;
        font-weight: 600;
        font-family: "楷体";
        display: flex;
      }
      .header_btn button {
        width: 80px;
        height: 30px;
        border: 0;
        border-radius: 6px;
        /* background-color: aquamarine; */
        cursor: pointer;
      }
      .middle {
        color: #fff;
        font-size: 20px;
        font-family: "楷体";
        height: calc(100% - 60px - 40px);
        margin: 20px;
        overflow: auto;
      }
      .middle ul li {
        width: 98%;
        height: 100px;
        color: #fff;
        margin-top: 10px;
        background-color: rgba(128, 28, 145, 0.5);
        border-radius: 8px;
        padding-left: 10px;
        display: flex;
        align-items: center;
      }
      .middle ul li button {
        width: 50px;
        height: 25px;
        cursor: pointer;
      }
      .styleBox {
        background-color: rgba(255, 105, 180, 0.5);
        display: flex;
        justify-content: space-around;
        border-radius: 8px;
        height: 100px;
        font-size: 34px;
        align-items: center;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div id="list" v-if="isLogin">
        <div class="header">
          <div class="header_text">
            <div>
              <img :src="userInfo.headimgurl" alt="被外星人窃走了" width="60" />
            </div>
            <div>昵称:{{userInfo.nickname}}</div>
          </div>
          <div class="header_btn">
            <button @click="isLogin=false">退出登入</button>
            <button @click="getList">获取列表</button>
          </div>
        </div>
        <div class="middle">
          <!-- <div class="styleBox">
            <div>
              <img
                :src="userInfo.headimgurl"
                alt="被外星人窃走了"
                width="60"
              />
            </div>
            <div>昵称:{{userInfo.nickname}}</div>
          </div> -->
          <ul>
            <li v-for="item  of  list" :key="item._id">
              {{item.name}}
              <img :src="item.headimgurl" alt="" width="50" />
              {{item.description}}
              <button v-has:read="jurisdiction">查看</button>
              <button v-has:edit="jurisdiction">修改</button>
              <button v-has:delete="jurisdiction">删除</button>
              <button v-has:add="jurisdiction">增加</button>
            </li>
          </ul>
        </div>
      </div>
      <div id="login" v-else>
        <fieldset>
          <legend>登入</legend>
          <div>
            <label for="username">
              <span>用户名:</span>
              <input type="text" v-model="username" id="username" />
            </label>
          </div>
          <div>
            <label for="password">
              <span>密&nbsp;&nbsp;&nbsp;码:</span>
              <input
                type="text"
                v-model="password"
                id="password"
                @keydown.13="login"
              />
            </label>
          </div>
          <div>
            <button @click="login">登入</button>
          </div>
        </fieldset>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script>
      /**
       *指令参数
       *自定义指令跟表达式
       *
       */
      /**
       * 鉴权 按钮级别
       * 菜单鉴权
       * 路由鉴权
       * 
       * 按钮鉴权的实现思路
        1.先登入,获取用户的按钮权限数据
        2.声明一个自定义指令 v-has
        3.将用户的按钮权限数据,通过指令参数的编写方式,传入到指令内部钩子函数
        4.钩子函数inserted中,通过判断对比当前角色是否具备该按钮权限,如果没有,核心逻辑el.parentNode.removeChild(el)
      */
      //token 用于认证客户端的身份
      //封装会话储存
      let local = {
        get(key) {
          return sessionStorage.getItem(key);
        },
        set(key, value) {
          sessionStorage.setItem(key, value);
        },
      };

      //封装登入请求
      const loginApi = (params = {}) => {
        return fetch("http://chst.vip/users/login", {
          method: "post",
          headers: {
            "content-type": "application/json",
          },
          body: JSON.stringify(params),
        })
          .then((res) => res.json())
          .catch((err) => err.toString());
      };

      //封装获取列表请求
      const listApi = () => {
        return fetch("http://chst.vip/students/getstulist?count=10", {
          headers: {
            authorization: local.get("login"),
          },
        })
          .then((res) => res.json())
          .catch((err) => err.toString());
      };
      const vm = new Vue({
        el: "#app",
        directives: {
          has: {
            inserted(ele, binding) {
              //   console.log(ele);
              console.log(binding);
              let role = binding.arg;
              let roleValue = binding.value;
              //判断用户的按钮权限数组中是否包含当前这个按钮应该具备的权限字段
              let testing = roleValue.includes(role);
              if (!testing) {
                // ele.disabled = true;
                ele.parentNode.removeChild(ele);
              }
            },
          },
        },
        data: {
          username: "",
          password: "",
          isLogin: false,
          list: [],
          //权限按钮
          jurisdiction: [],
          userInfo: {},
          aa:[]
        },
        methods: {
          async getList() {
            let res = await listApi();
            if (res.state) {
              this.list = res.data;
            } else {
              alert(res.msg);
            }
          },
          async login() {
            let data = {
              username: this.username,
              password: this.password,
            };
            if (!data.username || !data.password) {
              return console.log("当前值不能为空");
            }
            let res = await loginApi(data);
            if (res.state) {
              local.set("login", res.token);
              this.isLogin = true;
              this.jurisdiction = res.permission.buttons;
              //修改userInfo
              this.userInfo = res.userInfo;
              this.list = [];
            } else {
              alert(res.msg);
            }
          },
        },
      });
    </script>
  </body>
</html>
